How to Use Imagemaps in your Pages

What is an imagemap? You should know that you can link to another page from an image, but did you know that you can subdivide an image to link to a number of pages depending on where you click? Clicking on different areas on the image sends the user to different parts of your web site. There are two ways of creating imagemaps, server - side or client - side. For the purpose of this tutorial we will concentrate on client-side imagemaps. In order to use imagemaps on your pages you will need the following things: an image that you want to use on your page and the map information in your HTML.

So What Commands Are Involved?

`Imagemap Tags`

<MAP> -- This tag contains Imagemap information. <AREA> -- This defines a clickable area of an image which links to a different page. <SHAPE> -- The shape of the clickable area either 'rect', 'poly' or 'circle' <COORDS> -- The left top, right and bottom coordinates of the clickable region within the image. <USEMAP> -- Use a MAP tag information.

Creating your Imagemaps

`Imagemaps: How to begin.`

First things first it helps to have the image you want to use ready. You can use either GIFs or JPGs, but make sure that whatever images you use it is not going to be too large otherwise your page may take too long to load and put people off. You will also need to know the size of the image in pixels. The example will use the GIF file imagemap.gif which is 250 pixels wide by 150 pixels high. To create an imagemap look at the picture you have decided to use and in your mind decide where you would like someone to click and write down what page it would link to, as shown below Imagemap 1 will goto page img1.html Imagemap 2 will goto page img2.html Imagemap 3 will goto page img3.html Imagemap 4 will goto page img4.html You will then need to jot down the co-ordinates of the area of each section. You can use 'rect', 'poly' or 'circle'. The tag COORDS gives the exact pixel coordinates for the image region. For 'rect' give the x,y coordinates of the top left corner, followed by the coordinates of the bottom right corner. If you are using 'circles' you will need to give the x, y centre point, followed by the radius in pixels. For polygons, list the x,y coordinates of all the corners, in a clockwise motion starting from any point. Imagemap 1 - rectangle from 0, 0, 400, 80 Imagemap 2 - rectangle from 200, 80, 400, 170 Imagemap 3 - rectangle from 200, 170, 400, 250 Imagemap 4 - rectangle from 0, 80, 200, 250

Imagemaps.... an example

Now that you have all the coordinates you are ready to begin. After the BODY tag in your HTML put the following in: <MAP NAME="mapexamp"> This defines that you are about to set up some information in our case coordinates which can be called up at any time by calling the 'mapexamp' information. After the <MAP NAME> tag you will need to add an <AREA> tag for each region of the image you have drawn. In our examples we have four regions, Imagemaps 1 to 4. So your code should look like something below... <BODY> <MAP NAME="mapexamp"> <AREA SHAPE="rect" COORDS="0, 0, 400, 80" HREF="img1.html"> <AREA SHAPE="rect" COORDS="200, 80, 400, 170" HREF="img2.html"> <AREA SHAPE="rect" COORDS="200, 170, 400, 250" HREF="img3.html"> <AREA SHAPE="rect" COORDS="0, 80, 200, 250" HREF="img4.html"> </MAP> Please ensure that you have the </MAP> tag in when you finish defining the regions.

Linking an Image to a Map

Then to place the imagemap on your page you simply insert the gif file you are using as normal with the <IMG> tag and add a USEMAP tag so the source should read. <IMG SRC="imagemap.gif" USEMAP="#mapexamp"> With the inclusion of this into your html you should have your imagemap working fine on your web page !!!! So the full code would look like <HTML><HEAD><TITLE> Imagemap Example</TITLE></HEAD> <BODY> <MAP NAME="mapexamp"> <AREA SHAPE="rect" COORDS="0, 0, 400, 80" HREF="img1.html"> <AREA SHAPE="rect" COORDS="200, 80, 400, 170" HREF="img2.html"> <AREA SHAPE="rect" COORDS="200, 170, 400, 250" HREF="img3.html"> <AREA SHAPE="rect" COORDS="0, 80, 200, 250" HREF="img4.html"> </MAP> <IMG SRC="imagemap.gif" USEMAP="#mapexamp" BORDER=0> </BODY> </HTML> The result is as follows: Here is the finished example We will be looking into 'Circles' and 'Polygons' at a later stage. If you would rather use a program to create your imagemaps automatically you can use a program for PC's called MapEdit which is availiable to download from lots of software download sites. For more information please email [email protected]